<!-- 收藏 -->
<template>
    <!-- 商品列表 -->
    <view class="goods" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
		<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
    	<!-- 最外层 -->
    	<view class="goods-info x-f" v-for="(good, index) in collect" :key="index" @click="jump(good)">
    		<!-- 图片 -->
    		<image class="goods-img" :src="good.list_pic_url"></image>
    		<!-- 文字内容 -->
    		<view class="info">
    			<view class="title">{{good.spu_name}}</view>
    			<view class="num">已兑{{good.sale_num}}件</view>
    			<view class="score-btn x-bc">
    				<view class="score">{{good.points}}积分</view>
    			</view>
    		</view>
    	</view>
		<view class="getMore" style="padding: 50rpx 0;" v-if="collect.length > 5">
			<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
		</view>
		<empty :null_data="null_data" v-if="collect.length == 0"></empty>
    </view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
    export default {
        data() {
            return {
				//空状态
				null_data: {
					null_img: this.imgUrl + 'nocollect.png',
					text: '暂无收藏~'
				},
				isName: false,  // 显示下拉名称
				isLoad: false,  // 显示加载
				isNone: false,  // 显示加载
				obj: {          // 提交请求参数
					page: 1,
					pagesize: 10,
					member_id: 1
				},
				collect: [],    // 收藏列表
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
            }
        },
		mounted() {
			// 获取收藏列表
			this.$api('membercollectionList',this.obj).then(res=> {
				let arr = res.data
				this.collect = arr.data
			})
			this.$store.dispatch('user/get_collect',this.collect)
		},
		// 下拉加载
		onReachBottom() {
			this.getMore();
		},
		methods: {
			// 触发开始
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			// 下拉触发中
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			// 下拉触发结束
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			// 下拉刷新
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			// 商品详情
			jump(item) {
				let obj = {
					"spu_id": item.spu_id,
					"sku_id": item.sku_id,
				}
				this.$api('giftinfo',obj).then(res => {
					let goods = res.data;
				    this.$store.dispatch('goods/get_goodsInfo',goods)
				})
				this.$store.dispatch('goods/get_detail',item)
			    this.$Router.push({
			        path: '/pages/goods/detail/index',
					params: 'params'
			    })
			},
			// 加载更多
			getMore() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.obj.page++
					this.$api('membercollectionList',this.obj).then( res => {
						let arr = [...this.collect,...res.data.data]
						this.collect = arr
						this.$store.dispatch('user/get_collect',arr)
						if(!res.data.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
    },
}
</script>

<style lang="scss" scoped>
    @import './index.scss';
</style>
